<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2018/12/10
  Time: 8:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Favicon and touch icons -->
    <%--<link rel="shortcut icon" href="assets/ico/favicon.png">--%>
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

    <%--<jsp:include page="${pageContext.request.contextPath}/common/tag.jsp"/>--%>
</head>
<body>
<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row" style="padding-top: 150px;">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>登录</h3>
                            <p>输入您的用户名和密码登录：</p>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form role="form" action="userInfo/extend" id="userform" method="post" style="height: 200px;">
                            <div class="form-group">
                                <label class="sr-only" for="form-username">用户名：</label>
                                <input type="text" value="${uname}" name="username" placeholder="请输入用户名" onblur="empty()" class="form-username form-control" id="form-username">
                                <span style="font-size: 10px;margin-left: 5px;color: red;" id="spanname"></span>
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="form-password">密码：</label>
                                <input type="password" value="${mima}" name="password" placeholder="请输入密码" onblur="empty1()" class="form-password form-control" id="form-password">
                                <span style="font-size: 10px;margin-left: 5px;color: red;" id="spanpwd"></span>
                            </div>
                            <%--<button class="btn btn-primary" onclick="login()">登录</button>--%>
                            <%--<input type="button" value="登录" class="btn btn-primary col-sm-offset-3" style="height: 35px; width: 100px;">--%>
                        </form>
                        <button class="btn btn-primary col-sm-12" id="login" onclick="login()" style="margin-top: -40px;">登录</button>
                        <h3 class="text-center" style="color: red;"><span>${msg}</span></h3>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>


<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<%--<script src="assets/js/scripts.js"></script>--%>
<script>
    function login() {
        var name = $("[name='username']").val();
        var pwd = $("[name='password']").val();
        if (name == "" && pwd == "") {
            $("#spanname").html('用户名不能为空');
            $("#spanpwd").html('密码不能为空');
            return false;
        } else if (name == "") {
            $("#spanname").html('用户名不能为空');
            return false;
        } else if (pwd == "") {
            $("#spanpwd").html('密码不能为空');
            return false;
        } else {
            $("#userform").submit();
        }
    }

    /*失去焦点请input值*/
    function empty(){
        $("#spanname").html("");
    }
    function empty1(){
        $("#spanpwd").html("");
    }
    jQuery(document).ready(function() {
        $.backstretch([
            "assets/img/backgrounds/2.jpg"
            , "assets/img/backgrounds/3.jpg"
            , "assets/img/backgrounds/1.jpg"
        ], {duration: 3000, fade: 750});
    });
</script>
<%--<script src="assets/js/placeholder.js"></script>--%>
</body>
</html>
